{% block sw_password_field %}
<!-- eslint-disable sw-deprecation-rules/no-twigjs-blocks, vue/no-duplicate-attributes, vue/no-parsing-error -->
{% block sw_text_field %}
<sw-contextual-field
    class="sw-field--password"
    v-bind="{
        ...$attrs,
        ...inheritanceAttrs
    }"
    :name="formFieldName"
    @inheritance-restore="$emit('inheritance-restore', $event)"
    @inheritance-remove="$emit('inheritance-remove', $event)"
>
    <template #sw-field-input="{ identification, disabled, size, setFocusClass, removeFocusClass }">
        <div class="sw-field--password__container">
            <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
            <input
                :id="identification"
                :type="showPassword ? 'text' : 'password'"
                :name="identification"
                :placeholder="passwordPlaceholder"
                :disabled="disabled"
                :value="currentValue"
                :autocomplete="autocomplete"
                :aria-label="ariaLabel && $tc(ariaLabel)"
                @input="onInput"
                @change="onChange"
                @focus="setFocusClass"
                @blur="removeFocusClass"
            >
            <span
                v-if="passwordToggleAble"
                :title="showPassword ? $tc('global.sw-field.titleHidePassword') : $tc('global.sw-field.titleShowPassword')"
                class="sw-field__toggle-password-visibility"
                role="button"
                tabindex="0"
                @click="onTogglePasswordVisibility(disabled)"
                @keydown.enter="onTogglePasswordVisibility(disabled)"
            >
                <mt-icon
                    v-if="showPassword"
                    name="regular-eye-slash"
                    size="16px"
                />

                <mt-icon
                    v-else
                    name="regular-eye"
                    size="16px"
                />
            </span>
        </div>
    </template>

    <template
        v-if="copyable"
        #sw-contextual-field-suffix="{ identification }"
    >
        <sw-field-copyable
            v-if="copyable"
            :display-name="identification"
            :copyable-text="currentValue"
            :tooltip="copyableTooltip"
        />
    </template>

    <template #label>
        <slot name="label"></slot>
    </template>

    <template #hint>
        <slot name="hint"></slot>
    </template>
</sw-contextual-field>
    {% endblock %}
{% endblock %}
